<template>
  <div class="container">
    <div class="face">
      <div class="eye"></div>
      <div class="eye2"></div>
    </div>
    <input
      type="range"
      name=""
      id=""
      max="1"
      min="0"
      step="0.01"
      class="range"
      v-model="rangeValue"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const rangeValue = ref(0);
onMounted(() => {
  const rangeEl = document.querySelector(".range") as HTMLElement;
  const faceEl = document.querySelector(".face") as HTMLElement;

  rangeEl?.addEventListener("input", (e: Event) => {
    console.log(e);
    const value = (e.target as HTMLInputElement).value;
    faceEl?.style.setProperty("--delay", `-${value}s`);
  });
});
</script>

<style lang="scss" scoped>
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.face {
  --delay: 0s;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: red;
  animation: faceColor 1s var(--delay) linear forwards paused;
}

.eye,
.eye2 {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  clip-path: polygon(0 90%, 100% 0, 100% 100%, 0% 100%);
  animation: eye 1s var(--delay) linear forwards paused;
}

.eye2 {
  top: 50px;
  right: 20px;
  left: unset;
  clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);
}

.range {
  margin-top: 10px;
}

@keyframes faceColor {
  0% {
    background-color: tomato;
  }

  25% {
    background-color: orange;
  }

  50% {
    background-color: #1e90ff;
  }

  75% {
    background-color: orchid;
  }

  100% {
    background-color: #3cb371;
  }
}

@keyframes eye {
  0% {
    clip-path: polygon(0 90%, 100% 0, 100% 100%, 0% 100%);
  }

  25% {
    clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);
  }

  50% {
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
  }

  75% {
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
  }
}
</style>
